<script lang="ts" setup>
import { useProvenceSourceStore } from '../../store/provenanceSourceDialog';
const provenanceSourceStore = useProvenceSourceStore()
</script>

<template>
    <el-dialog v-model="provenanceSourceStore.open" title="藏品来源信息" width="800" align-center class="custom-dialog">
        <el-descriptions column="3" border size="large" label-align="right" label-size="small" label-width="100px">
            <el-descriptions-item label="来源类型">
                <div class="content-box type">
                    {{ provenanceSourceStore.data.acquisitionType }}
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="捐赠人">
                <div class="content-box accent">
                    {{ provenanceSourceStore.data.donorName || '--' }}
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="来源凭证">
                <div class="content-box No">
                    <el-icon>
                        <Document />
                    </el-icon>
                    {{ provenanceSourceStore.data.certificateNo || '暂无凭证' }}
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="来源详情" class="full-row">
                <div class="content-box details">
                    {{ provenanceSourceStore.data.sourceDetail || '暂无详情信息' }}
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<style scoped>
/* 关键修正：强制跨列布局 */
.full-row :deep(.el-descriptions-item__cell) {
    grid-column: 1 / span 2;
    width: 100% !important;
}

/* 优化详情内容容器 */
.content-box.details {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    font-weight: 900;
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    display: block;
    color: #303133;
    /* 新增 */
    width: 100%;
    /* 新增 */
}

/* 调整描述列表边距 */
:deep(.el-descriptions) {
    margin: 10px 0;
    --el-descriptions-table-border: 1px solid #ebeef5;
    /* 统一边框颜色 */
}

/* 对话框标题样式 */
:deep(.el-dialog__header) {
    margin: 0;
    padding: 16px 20px;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__title) {
    font-size: 16px;
    color: #303133;
    font-weight: 600;
}


:deep(.el-descriptions__label) {
    color: #909399;
    font-size: 13px;
}

:deep(.el-descriptions__content) {
    color: #606266;
    font-size: 13px;
}

/* 内容区块样式 */
.content-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    background: #f8f9fc;
    color: #606266;
    min-height: 36px;
}
.content-box.No{
    color: #67c23a;
    background-color: rgb(209.4, 236.7, 195.9);
}
.content-box.type {
    color: rgb(184, 129.6, 48);
    background-color: rgb(250, 236.4, 216);
}

.content-box.accent {
    background: #f0f9ff;
    color: #409eff;
    font-weight: 500;
}
</style>